<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <title>英语卡片</title>
    <meta name="viewport" content="width=450, initial-scale=1.0">
    <style>
        @font-face {
            font-family: CharisW;
            font-weight: 400;
            src: url(Charis-Regular.woff2);
        }
        html {
            font-size: 28.125px; /* 450/16 = 28.125, 1rem=28.125px, 16rem=450px */
        }
        body {
            margin: 0;
            padding: 0;
            min-height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            background: none;
        }
        #card {
            position: relative; /* keep as positioning context for absolute children */
            width: 16rem;
            height: 28.444rem;
            background: rgba(255, 255, 255, 0.0);
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: flex-start;
            overflow: hidden;
            box-shadow: 0 0 0.85rem 0 rgba(0, 0, 0, 0.08);
        }
        #card .card-bg {
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            z-index: 0;
        }
        #card > *:not(.card-bg) {
            position: relative;
            z-index: 1;
        }
        @media (min-width: 900px) and (min-height: 1600px) {
            html {
                font-size: 56.25px; /* 900/16 = 56.25, 1rem=56.25px, 16rem=900px */
            }
            body {
                width: 16rem;
                height: 28.444rem; /* 1600/56.25 = 28.444 */
            }
            #card {
                width: 16rem;
                height: 28.444rem;
            }
        }


        .title {
            margin-top: 1.5rem;
            font-size: 1.2rem;
            color: #225b8c;
            font-weight: bold;
            letter-spacing: 2px;
            text-align: center;
            font-family: 'PingFang SC', 'Microsoft YaHei', Arial, sans-serif;
        }

        .unit {
            margin-top: 0.5rem;
            font-size: 1.2rem;
            color: #225b8c;
            font-weight: bold;
            text-align: center;
            font-family: 'PingFang SC', 'Microsoft YaHei', Arial, sans-serif;
        }

        .bird-img {
            margin-top: 1.5rem;
            overflow: hidden;
            display: block;
        }

        .word-box {
            width: 10rem;
            height: 5rem;
            background: #fff;
            border-radius: 0.5rem;
            border: 0.2rem solid #f9a23b;
            box-sizing: border-box;
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
            overflow: visible;
        }

        .word-box .lines {
            position: absolute;
            left: 0.5rem;
            right: 0.5rem;
            top: 0.85rem;
            bottom: 0.85rem;
            height: calc(100% - 1.7rem);
            width: calc(100% - 1rem); 
            z-index: 0;
        }

        .word-box .line {
            position: absolute;
            left: 0;
            right: 0;
            height: 0;
            border-top: 0.07rem solid #b3e0f7;
        }

        .word-box .line.dashed {
            border-top: 0.07rem dashed #b3e0f7;
        }

        .word-box .line1 {
            top: 0;
        }

        .word-box .line2 {
            top: 33.33%;
        }

        .word-box .line3 {
            top: 66.66%;
        }

        .word-box .line4 {
            top: 100%;
        }

        .word {
            margin-top: -0.3rem;
            line-height: 1;
            font-size: 1.8rem;
            color: #225b8c;
            font-weight: bold;
            font-family: 'Arial Rounded MT Bold', 'Arial', sans-serif;
            z-index: 999;
        }

        .phonetic {
            margin-top: 1.2rem;
            font-size: 1.4rem;
            color: #225b8c;
            font-family: 'CharisW', 'Arial', sans-serif;
            text-align: center;
        }

        .desc {
            margin-top: 0.6rem;
            font-size: 1rem;
            color: #225b8c;
            text-align: center;
            font-family: '幼圆','PingFang SC', 'Microsoft YaHei', Arial, sans-serif;
            font-weight: bold;
        }
    </style>
</head>

<body>
    <div id="card">
        <!-- background image placed inside #card so html2canvas captures it -->
        <img class="card-bg" id="bgImg" src="bg.jpg" alt="bg" crossorigin="anonymous">
        <div class="title" id="title"></div>
        <div class="unit" id="unit"></div>
        <img class="bird-img" id="birdImg" src="" alt="bird" crossorigin="anonymous" />
        <div class="word-box">
            <div class="lines">
                <div class="line line1"></div>
                <div class="line line2 dashed"></div>
                <div class="line line3 dashed"></div>
                <div class="line line4"></div>
            </div>
            <span class="word" id="word"></span>
        </div>
        <div class="phonetic" id="phonetic"></div>
        <div class="desc" id="desc"></div>
    </div>
    <script src="https://cdn.staticfile.net/html2canvas/1.4.1/html2canvas.min.js"></script>
    <script>
        // 默认参数
        const defaults = {
            title: '五年级上（人教）',
            unit: 'Unit 4',
            word: 'in front of',
            phonetic: '/ˈhæm.bɜː.ɡə(r)/',
            desc: '后面接邮件地址',
            birdImg: './bird.png'
        };
        // 解析URL参数
        function getQueryParams() {
            const params = {};
            window.location.search.replace(/\??([^=&]+)=([^&]*)/g, function (_, k, v) {
                params[decodeURIComponent(k)] = decodeURIComponent(v);
            });
            return params;
        }
        const params = getQueryParams();
        document.getElementById('title').textContent = params.title || defaults.title;
        document.getElementById('unit').textContent = params.unit || defaults.unit;
        document.getElementById('word').textContent = params.word || defaults.word;
        document.getElementById('phonetic').textContent = params.phonetic || defaults.phonetic;
        document.getElementById('desc').textContent = params.desc || defaults.desc;
        // set crossOrigin before assigning src to allow CORS-enabled images to be used in canvas
        const birdEl = document.getElementById('birdImg');
        birdEl.crossOrigin = 'anonymous';
        birdEl.src = params.birdImg || defaults.birdImg;
        // bg image is already in DOM; ensure it uses requested param if provided
        const bgEl = document.getElementById('bgImg');
        if (params.bgImg) {
            bgEl.crossOrigin = 'anonymous';
            bgEl.src = params.bgImg;
        }

        // helper: wait for all images inside #card to load (or error)
        function waitForImages(container) {
            const imgs = Array.from(container.querySelectorAll('img'));
            return Promise.all(imgs.map(img => {
                return new Promise(resolve => {
                    if (img.complete && img.naturalWidth !== 0) return resolve();
                    img.addEventListener('load', () => resolve());
                    img.addEventListener('error', () => resolve());
                });
            }));
        }

        // 页面渲染完成后等待图片加载，再截图（useCORS + backgroundColor:null）
        window.onload = function() {
            const card = document.getElementById('card');
            waitForImages(card).then(() => {
                // small delay to allow fonts to apply
                setTimeout(() => {
                    // Fix: ensure bg image covers exact pixel size of #card to avoid partial rendering
                    const rect = card.getBoundingClientRect();
                    const bgEl = document.getElementById('bgImg');
                    if (bgEl) {
                        bgEl.style.width = rect.width + 'px';
                        bgEl.style.height = rect.height + 'px';
                    }
                    // Also ensure bird image uses explicit pixel size
                    const bird = document.getElementById('birdImg');
                    if (bird) {
                        bird.style.width = Math.round(rect.width * 0.62) + 'px';
                        bird.style.height = Math.round(rect.width * 0.62) + 'px';
                    }

                    html2canvas(card, {useCORS: true, backgroundColor: '#ffffff', scale: window.devicePixelRatio || 1, windowWidth: rect.width, windowHeight: rect.height})
                        .then(function(canvas) {
                            // 自动下载图片
                            var link = document.createElement('a');
                            link.download = 'card_' + Date.now() + '.png';
                            link.href = canvas.toDataURL('image/png');
                            link.click();
                        }).catch(err => {
                            console.error('html2canvas error:', err);
                        });
                 }, 200);
             });
         };
    </script>
</body>

</html>